<template>
    <div>
        <Search />
        <ChartLine :yMax='100' yUnit='%' title="智能设备整体性能趋势 (到达率)" :seriesData='dataList' :xName='xName'  :legendName="legendName"></ChartLine>
    </div>
</template>

<script  lang="ts">
import { ref, reactive, defineComponent } from 'vue';
import Search from 'comps/search/index.vue';
import ChartLine from 'comps/chart/line/index.vue';
import ETable from 'comps/eTable/index.vue';
export default defineComponent({
    name: 'deviceMonitor',
    components: { Search, ChartLine, ETable },
    setup() {
        const dataList: Array = reactive([
            {
                name: '云端安保机器人',
                data: [100, 100, 100, 100, 50, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
                type: 'line',
                symbol: 'none'
            },
            {
                name: '云端清洁机器人',
                data: [100, 100, 100, 100, 100, 100, 100, 100, 66, 100, 100, 100, 100, 100, 100, 100, 100],
                type: 'line',
                symbol: 'none'
            },
            {
                name: '巡逻测温机器人',
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 88, 100, 100, 100],
                type: 'line',
                symbol: 'none'
            }
        ]);
        const xName = ref(['2009/6/12 1:01', '2009/6/12 1:40', '2009/6/12 1:56', '2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00', '2009/6/12 12:00', '2009/6/12 13:00', '2009/6/12 14:00', '2009/6/12 15:00']);
        const legendName = ref(['云端安保机器人', '云端清洁机器人', '巡逻测温机器人']);
        return {
            dataList,
            xName,
            legendName
        };
    }
});
</script>

<style lang="scss">
</style>
